<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" id="link1"/>
		<link rel="stylesheet" type="text/css" href="fonts/font_icon/iconfont.css" />
		<style type="text/css">
			.info-tab {
				height: 45px;
			}
			
			.tab-left {
				float: left;
				width: 30%;
				height: 45px;
				display: block;
				overflow: hidden;
			}
			
			.tab-left a {
				display: block;
				color: #000000;
				font-size: 16px;
				width: 100%;
				height: 45px;
				line-height: 45px;
			}
			
			.tab-left a span {
				color: #007AFF;
				margin-right: 5px;
				font-weight: 800;
			}
			
			.tab-right {
				float: right;
				width: 70%;
				height: 45px;
				display: block;
				overflow: hidden;
			}
			
			.tab-right a {
				display: inline-block;
				color: #000000;
				font-size: 14px;
				width: 45px;
				height: 40px;
				overflow: hidden;
			}
			
			.tab-right a span {
				color: #007AFF;
				margin-right: 5px;
				font-weight: 800;
			}
			
			.tab-border {
				position: fixed;
				bottom: 45px;
				height: 150px;
				width: 100%;
				overflow: hidden;
				display: block;
				background-color: #fff;
			}
			
			.tab-li {
				width: 30px;
				height: 30px;
				line-height: 30px;
				border-radius: 50%;
				display: inline-block;
				overflow: hidden;
				background-color: #fff;
				color: #666;
				margin: 5px;
				border: 1px solid #666666
			}
			
			.tab-li-color-r {
				background-color: #B05B5C;
				color: #FFFDEF;
				border: 1px solid #BF0A10;
			}
			
			.tab-li-color-g {
				background-color: #ACE1AF;
				color: #FFFDEF;
				border: 1px solid #008573;
			}
			
			.tab-li-color-e {
				background-color: #D9D6CF;
				color: #FFFDEF;
				border: 1px solid #666666;
			}
			
			.bg-blue {
				background-color: #3AB3FF;
				width: 50px;
				height: 25px;
				color: #fff;
				font-size: 12px;
				display: inline-block;
				line-height: 25px;
				text-align: center;
				border-radius: 5px;
				margin: 5px;
			}
			
			.title-set {
				height: 45px;
				line-height: 45px;
			}
			
			.title-size {
				color: #222222;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header-bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"><span>3</span>/<span>100</span></h1>
			<a class="mui-icon iconfont icon-attention_light mui-icon-right-nav mui-pull-right"></a>
		</header>
		<div class="mui-content">
			<div class="mui-row" id="item1" style="padding-bottom: 55px;">
				<div class="title-set">
					<p class="title-size"><span class="info1">3</span>选择正确的题目题目自定义（单选题）</p>
				</div>
				<div class="mui-row">
					<ul class="mui-table-view mui-table-view-radio">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">A:这是A选项</a>
						</li>
						<li class="mui-table-view-cell mui-selected">
							<a class="mui-navigate-right">B:这是B选项</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">C:这是C选项</a>
						</li>
					</ul>
				</div>
				<div class="mui-row set-hide">
					<div class="mui-text-center mui-padding-top">
						正确答案:<span class="color-green1">A</span>
					</div>
					<div class="mui-content-padding">
						<span class="color-orange1 set-size">详细解析:</span>《中华人民共和国民用航空法》第九十条规定：从事飞行的民用航空器，应当携带下列文件：（一）民用航空器国籍登记证书；（二）民用航空器适航证书；（三）机组人员相应的执照；（四）民用航空器航行记录簿；（五）装有无线电设备的民用航空器，其无线电台执照；（六）载有旅客的民用航空器，其所载旅客姓名及其出发地点和目的地点的清单；（七）载有货物的民用航空器，其所载货物的舱单和明细的申报单；（八）根据飞行任务应当携带的其他文件。民用航空器未按规定携带前款所列文件的，国务院民用航空主管部门或者其授权的地区民用航空管理机构可以禁止该民用航空器起飞。
					</div>
				</div>
				
			</div>
			<!--<div class="mui-row">
				<div class="btn-prev" id="prev">上一题</div>
				<div class="btn-next" id="next">下一题</div>
			</div>-->
		</div>
		<div id="popover" class="mui-popover">
			<ul class="mui-table-view">
				<li class="tab-li mui-text-center tab-li-color-r">1</li>
				<li class="tab-li mui-text-center tab-li-color-g">2</li>
				<li class="tab-li mui-text-center tab-li-color-e">3</li>
				<li class="tab-li mui-text-center">4</li>
				<li class="tab-li mui-text-center">5</li>
				<li class="tab-li mui-text-center">6</li>
				<li class="tab-li mui-text-center">7</li>
				<li class="tab-li mui-text-center">8</li>
			</ul>
		</div>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item">
				<span class="mui-icon iconfont icon-right"></span>
				<span class="mui-tab-label">下一题</span>
			</a>
			<a class="mui-tab-item" id="xiangjie">
				<span class="mui-icon iconfont icon-comment"></span>
				<span class="mui-tab-label">详解</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon iconfont icon-delete_light"></span>
				<span class="mui-tab-label">移除</span>
			</a>
			<a class="mui-tab-item" id="favor">
				<span class="mui-icon iconfont icon-favor"></span>
				<span class="mui-tab-label" id="shoucang">收藏</span>
			</a>
			<a class="mui-tab-item" href="#popover" id="openPopover">
				<span class="mui-icon iconfont icon-edit"></span>
				<span class="mui-tab-label">答题卡</span>
			</a>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/zepot.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui.ready(function() {
				var type = 1;
				if(type == "1") {
					var oLink = document.getElementById('link1');
					oLink.href = 'css/style.css';
				} else {
					var oLink = document.getElementById('link1');
					oLink.href = 'css/style_opp.css';
				}
				mui('.header-bg').on('tap', '.mui-pull-right', function() {
					if(type == "1") {
						var oLink = document.getElementById('link1');
						oLink.href = 'css/style.css';
						type = 0;

					} else {
						var oLink = document.getElementById('link1');
						oLink.href = 'css/style_opp.css';
						type = 1;
					}
				})
				$("#xiangjie").on('tap',function(){
					$(".set-hide").toggle();
				})
				$("#shoucang").on('tap',function(){
					console.log("0");
					$("#shoucang").text("已收藏");
				})
			})
		</script>
	</body>

</html>